<template>
	
	<u-sticky :h5-nav-height="navHeight" >
		<view :style="bgStyle">
			<view class="status_bar" ></view>
			<view class="navbar">
				<view v-if="this.return" class="navbar__return" @click="goback">
					<u-icon name="arrow-left" size="40" color="#6c6c6c"></u-icon>
					<!-- <image class="navbar__icon" src="/static/index/direction-left-grey.svg" mode="aspectFit"></image> -->
				</view>
				<view v-if="this.title!=null" class="navbar__title" >
					{{title}}
				</view>
				<slot ></slot>
			</view>
		</view>
	</u-sticky>
</template>

<script>
	export default{
		name:"navBar",
		props:{
			return:{
				type:Boolean,
				default(){
					return true
				}
			},
			title:{
				type:String,
				default(){
					return null
				}
			},
			bgColor:{
				type:String,
				default(){
					return "transparent"
				}
			}
		},
		data(){
			return {
				navHeight:0,
				// return:true
			}
		},
		computed:{
			bgStyle:function(){
				return {
					"background-color":this.bgColor 
					// "background-color":"transparent"
				}
			}
		},
		methods:{
			goback(){
				uni.navigateBack({
					animationDuration:200,
					animationType:"pop-out"
				})
			}
		}
	}
</script>

<style lang="less">
	@import '../custom.less';
	
	.status_bar {
		height: var(--status-bar-height);
		width: calc(100vw);
		// background-color: #FFFFFF;
	}
	.navbar{
		padding: @uni-spacing-row-sm 0 ;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 44px;
		width: calc(100vw);
		// background-color: #FFFFFF;
		&__icon{
			height: 20px;
			width: 20px;
		}
		&__title{
			font-size: @uni-font-size-lg;
			margin:0 @uni-spacing-col-base;
		}
		&__return{
			margin-left: @uni-spacing-col-base;
			font-size: small;
			color: @font-color-grey;
		}
	}
	
</style>
